<template>
    <ul>
        <li v-for="item of $store.state.shopCart" :key="item.id">
            <input type="checkbox" :checked="item.check" :name="item.id" ref="items" @click="xuanXiangItem($event)">
            <div>
                <div class="info">
                    <img :src="item.imgUrl" alt="">
                    <div>
                        <span class="name">{{item.name}}</span>
                        <div class="price">￥{{item.newprice}}</div>
                        <div class="count">
                            <div @click="decreament(item,$event)">-</div>
                            <div>{{item.count}}</div>
                            <div @click="increament(item,$event)">+</div>
                        </div>
                    </div>
                </div>
            </div>
        </li>
    </ul>
<!--    {{block}}-->
    <div id="zheDang2"></div>
    <div id="jieSuan">
        <div id="caoZuo">
            <div id="xuanZe">
                <input type="checkbox" :checked="$store.state.shopCartCheck" ref="all" @click="xuanXiangAll()">
                <span>已选（{{checkNum}}）</span>
            </div>
            <div>
                <span id="heJi">合计：￥{{total.toFixed(2)}}</span>
            </div>
        </div>
        <div class="btn" id="xiadan" ref="bgc" v-show="this.$store.state.block" @click="payFor">下单</div>
        <div class="btn" ref="bgc2" v-show="!this.$store.state.block" @click="deleteShopCart">删除所选</div>
    </div>
</template>

<script>
    export default {
        name: "ShopCartListYouShangPinCom",
        data() {
            return {
                check: true,
                count: 0,
                checkNum: this.$store.state.shopCart.length,
                total: 0,
                payForList:[]
            }
        },
        mounted() {
            //合计功能
            let num = []
            this.$store.state.shopCart.map(item => {
                num.push(item.count * item.newprice)
            })
            console.log(num)
            this.total = num.reduce((pre, next) => {
                return pre + next
            }, 0)
        },
        methods: {
            increament(item) {
                this.$store.dispatch('increament', item)
                this.xuanXiangAll()
                this.xuanXiangItem()
            },
            decreament(item) {
                this.$store.dispatch('decreament', item)
                this.xuanXiangAll()
                this.xuanXiangItem()
            },
            xuanXiangAll() {//全选/全不选
                for (let i of this.$refs.items) {
                    i.checked = this.$refs.all.checked
                }
                //***********************************************************
                //按钮的变色功能
                if (this.$refs.all.checked) {
                    this.$refs.bgc.style.backgroundColor = 'red'
                    this.$refs.bgc2.style.backgroundColor = 'red'
                } else {
                    this.$refs.bgc.style.backgroundColor = 'lightgrey'
                    this.$refs.bgc2.style.backgroundColor = 'lightgrey'
                }
                //***********************************************************
                // 已选功能
                if (!this.$refs.all.checked) {
                    this.checkNum = 0
                } else {
                    this.checkNum = this.$store.state.shopCart.length
                }
                //************************************************************
                // 合计
                if (this.$refs.all.checked) {
                    let num = []
                    this.$store.state.shopCart.map(item => {
                        num.push(item.count * item.newprice)
                    })
                    console.log(num, "全选num")
                    this.total = num.reduce((pre, next) => {
                        return pre + next
                    }, 0)
                } else {
                    this.total = 0
                }
            },
            xuanXiangItem() {//单个
                this.count = 0
                for (let i of this.$refs.items) {
                    if (i.checked) {
                        this.count++
                    }
                    //*****************************************************
                    // 按钮的变色功能
                    if (this.count > 0) {
                        this.$refs.bgc.style.backgroundColor = 'red'
                        this.$refs.bgc2.style.backgroundColor = 'red'
                    } else {
                        this.$refs.bgc.style.backgroundColor = 'lightgrey'
                        this.$refs.bgc2.style.backgroundColor = 'lightgrey'
                    }
                    //******************************************************
                    if (this.count === this.$refs.items.length) {
                        this.$refs.all.checked = true
                    } else {
                        this.$refs.all.checked = false
                    }
                    //已选功能
                    this.checkNum = this.count
                }
                //***********************************************************
                // 合计功能
                let num = []
                this.payForList = []
                for (let i = 0; i < this.$refs.items.length; i++) {
                    // console.log(this.$refs.items[i].checked, i)
                    if (this.$refs.items[i].checked) {
                        //******************************************
                        //已选商品加入结算界面
                        console.log(this.$store.state.shopCart[i])
                        // this.$store.dispatch('payForList',this.$store.state.shopCart[i])
                        this.payForList.push(this.$store.state.shopCart[i])
                        //*******************************************
                        // console.log(this.$store.state.shopCart[i].count * this.$store.state.shopCart[i].newprice)
                        // this.deleteShopCart()
                        num.push(this.$store.state.shopCart[i].count * this.$store.state.shopCart[i].newprice)
                        console.log(num)
                    }
                    this.total = num.reduce((pre, next) => {
                        return pre + next
                    }, 0)
                }
                //************************************************************
            },
            deleteShopCart(){
                for (let i = 0; i < this.$refs.items.length; i++){
                    for(let j=i;j<this.$refs.items.length;j++){
                        if (this.$refs.items[i].checked){
                            this.$store.state.shopCart.splice(i,1)
                            this.xuanXiangItem()
                        }else if(this.$refs.items[i].checked&&this.$refs.items[i+j].checked){
                            this.$store.state.shopCart.splice(i,j-1)
                            this.xuanXiangItem()
                        }
                    }

                }
            },
            payFor(){
                this.xuanXiangItem()
                console.log(this.payForList.map(item=>item.id))
                let id = this.payForList.map(item=>item.id)
                this.$router.push({path:'/payfor-view',query:{id:id,total:this.total.toFixed(2)}})
            }
        }
    }
</script>

<style scoped>
    #zheDang2 {
        width: 100%;
        height: 60px;
    }

    ul {
        width: 100%;
        height: auto;
        background: #d9d9d9;
        position: relative;
    }

    ul > li {
        width: 100%;
        height: 220px;
        background: #fff;
        margin-bottom: 10px;
        border-radius: 10px;
        position: relative;
    }

    li > div {
        width: 88%;
        height: 100%;
        float: right;
        position: relative;
    }

    li input {
        display: block;
        position: absolute;
        top: 45%;

    }

    .info {
        width: 100%;
        height: 80%;
        margin-top: 30px;
        display: flex;
        position: relative;
    }

    .info > div {
        width: 80%;
        position: relative;
    }

    img {
        width: 20%;
        height: 20vw;
        background: #EEEEEE;
        display: inline-block;
    }

    .name {
        width: 100%;
        font-size: 14px;
    }

    .price {
        position: absolute;
        bottom: 10%;
    }

    .count {
        width: 90px;
        height: 30px;
        display: flex;
        position: absolute;
        bottom: 10%;
        right: 0;
    }

    .count > div {
        width: 29%;
        height: 100%;
        border: 1px solid lightgrey;
        text-align: center;
        line-height: 30px;
    }

    #jieSuan {
        width: 100%;
        height: 60px;
        background: #fff;
        position: fixed;
        bottom: 61px;
        display: flex;
        justify-content: space-between;
        border-top: 1px solid lightgrey;
    }

    #jieSuan > div {
        height: 100%;
    }

    #caoZuo {
        width: 60%;
        display: flex;
        justify-content: space-between;
    }

    #caoZuo > div {
        margin: auto 0;
    }

    #xuanZe {
        font-size: 1rem;
    }

    #heJi {
        margin-right: 10px;
    }

    .btn {
        width: 40%;
        background: red;
        font-size: 1rem;
        text-align: center;
        line-height: 60px;
    }
    #xiadan{
        position: absolute;
        right: 0;
    }
</style>